<template>
  <div class="wft-w-h-100">
    <div class="wft-data-analysis" @click="editHandler" :style="{ backgroundColor: bgColor }">
      {{ value }}
      <div class="wft-data-analysis-mask">
        <div class="wft-data-analysis-mask-edit">
          <span>{{ text }}</span>
        </div>
      </div>
    </div>
    <!-- 函数过滤编辑器 -->
    <HandlerDialog
      ref="HandlerDialogRef"
      :language="language"
      :dialogTitle="dialogTitle"
      :params="params"
      @saveHandle="value => propValue = value"
    >
      <template #tips>
        <slot name="tips">
          <p><b>1. </b>如果您在配置响应拦截器返回了「response」那么上面「res.data」为服务器响应数据</p>
          <p><b>2. </b>如果您在配置响应拦截器返回了「response.data」那么上面「res」为服务器响应数据</p>
        </slot>
      </template>
    </HandlerDialog>
  </div>
</template>
<script>
import HandlerDialog from './dialog/handle.vue'
export default {
  props: {
    text: {
      type: String,
      default: '数据过滤'
    },
    dialogTitle: {
      type: String,
      default: '函数编辑器'
    },
    language: {
      type: String,
      default: 'javascript'
    },
    value: {
      type: String,
      default: ''
    },
    params: {
      type: String,
      default: 'res'
    },
    bgColor: {
      type: String,
      default: '#fff'
    }
  },
  computed: {
    propValue: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  components: { HandlerDialog },
  methods: {
    editHandler() {
      this.$refs.HandlerDialogRef.init(this.propValue, this.language)
    }
  }
}
</script>
<style scoped>
.wft-w-h-100 {
  width: 100%;
  height: 100%;
}
.wft-data-analysis {
  width: 98%;
  height: 120px;
  overflow: auto;
  overflow-x: hidden;
  border-radius: 4px;
  background-color: #fff;
  color: #086d6d;
  font-size: 14px;
  padding-left: 8px;
  box-sizing: border-box;
  position: relative;
  cursor: pointer;
}
.wft-data-analysis-mask {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border: 1px solid #00a2ff;
  background-color: #ecf5ff;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .3s;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wft-data-analysis-mask:hover {
  opacity: 0.9;
}
.wft-data-analysis-mask-edit {
  width: 83px;
  height: 32px;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  border-radius: 4px;
  color: #2f54eb;
  background-color: rgba(0, 162, 255, .5);
}
</style>
